<template>
	<view class="category-row">
		<view class="category-item" @tap="$emit('open-selector','park')">
			<view class="category-row-bg">
				<image class="category-row-bg__img" src="/static/assets/source/category-row-bg.png" mode="scaleToFill" />
				<image src="/static/assets/source/category-row-icon1.png" class="category-row-icon" mode="aspectFit" />
			</view>
			<text style="margin-top: 10rpx;">按园区</text>
		</view>
		<view class="category-item" @tap="$emit('open-selector','area')">
			<view class="category-row-bg">
				<image class="category-row-bg__img" src="/static/assets/source/category-row-bg.png" mode="scaleToFill" />
				<image src="/static/assets/source/category-row-icon2.png" class="category-row-icon" mode="aspectFit" />
			</view>
			<text style="margin-top: 10rpx;">按区域</text>
		</view>
		<view class="category-item" @tap="$emit('open-selector','type')">
			<view class="category-row-bg">
				<image class="category-row-bg__img" src="/static/assets/source/category-row-bg.png" mode="scaleToFill" />
				<image src="/static/assets/source/category-row-icon3.png" class="category-row-icon" mode="aspectFit" />
			</view>
			<text style="margin-top: 10rpx;">按库形</text>
		</view>
		<view class="category-item" @tap="$emit('open-selector','tag')">
			<view class="category-row-bg">
				<image class="category-row-bg__img" src="/static/assets/source/category-row-bg.png" mode="scaleToFill" />
				<image src="/static/assets/source/category-row-icon4.png" class="category-row-icon" mode="aspectFit" />
			</view>
			<text style="margin-top: 10rpx;">按行业</text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'WarehouseCategoryRow'
}
</script>

<style lang="less" scoped>
.category-row {
	display: flex;
	justify-content: space-around;
	margin: 16rpx 0 8rpx 0;
}
.category-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 26rpx;
	padding: 10rpx 30rpx;
}
.category-row-bg {
	width: 110rpx;
	height: 110rpx;
	border-radius: 16rpx;
	background-image: url('/static/assets/source/category-row-bg.png');
	background-size: 100% 100%;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.category-row-bg__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}
.category-row-icon {
	width: 40rpx;
	height: 40rpx;
	object-fit: contain;
	position: relative;
	z-index: 1;
}
</style> 